<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const bucket = new Set();
      const data = {text:'hello world'}
      const obj = new Proxy(data,{
        get(target,key){
          console.log("get",key)
          bucket.add(effect);
          return target[key]
        },
        set(target,key, newVal){
          console.log("set",key)
          target[key]= newVal;
          bucket.forEach(fn=>fn());
          return true;
        }
      })
      console.log("obj", obj)
      function effect(){
        document.body.innerText=obj.text;
      }
      effect();
      setTimeout(()=>{
        obj.text = 'hello vue3';
      },1000)
    </script>
  </body>
</html>
